Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

برنامه نویسی مبایل با Asp net MVC - قسمت سوم

شبیه سازی برنامه های hybrid
افزایش زیاد تعداد کاربران تلفن همراه ، برنامه نویسی موبایل یا همان mobile programming و برنامه نویسی وب و طراحی اپلیکیشن کاربردی هم اکنون جزو بالاترین تخصص ها در بازار کنونی تکنولوژی به شمار می رود. در حال حاضر برنامه نویسی موبایل ، شامل برنامه نویسی اندروید از روش های نوین جهت حرکت در مسیر پیشرفت تکنولوژی می باشد و روی کار آمدن گوشیهای هوشمند با انواع سیستم عامل همچون اندروید ،IOS و ویندوز موبایل می توان امکاناتی بسیاری را برای کاربران فراهم نمود.
در این قسمت از آموزش شبیه سازی برنامه های hybrid را آموزش خواهیم داد.
اکنون مثالی را تشریح می کنیم که در آن توسعه برنامه های hybrid در پلت فرم های Asp.net MVC را به خوبی توضیح داده است. در این مثال اطلاعات دانشجویانی که در یک فعالیت علمی در دانشگاه Contoso شرکت دارند نمایش داده می شود که به دو روش می توان به مشخصات دانشجویان دسترسی پیدا کرد. در برنامه نویسی این مثال، اگرچه زیاد روی بهینه سازی کدهای آن کار نشده است اما به دلیل اینکه پیاده سازی آن در پلت فرم Asp.net MVC ساده است مثال خوبی است.

پیش نیازهای لازم برای انجام این مثال
• Asp.net mvc با visual studio 2010 (هر نسخه ایی که ویرایش express باشد).
• نصب اندروید sdk وپلاگین های adt برای eclips
جزئیات بیشتر به همراه ابزارهای مورد نیاز برای نصب در آدرس زیر موجود است:
http://developer.android.com/sdk/requirements.html

پشت صحنه ی کدهای asp.net mvc
کد زیر محتوی فایل _layout.cshtml است که دسترسی به کتابخانه های jquery و jquery mobile را فراهم می کند. اگر چه این دو کتبخانه برای ساختن برنامه ی موبایل تحت mvc مورد نیاز نیستند اما برای مدیریت کردن بیشتر کارها در برخی موارد، مورد استفاده قرار می گیرند، مثلا از jquery mobile استفاده می کنیم چون نمی خواهیم به ازای هر نوع موبایلی نسخه ی متفاوتی از برنامه را تولید کنیم:

<<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" <src="http://code.jquery.com/mobile/1.0/jquery.mobile1.0.min.js">
/script>>

طراحی وب سایت و طراحی مالتی مدیا

بیشتر برنامه های تحت وبی موبایل ها طوری نوشته میشوند که صفحات آنها حدود 900 پیکسل را اشغال کنند تا با نمایش کل صفحه به صورت خودکار تغییر اندازه دهند. با یک سایت¬موبایل که برای دستگاه های کوچکتر بهینه شده است ما می توانیم به دستگاه بفهمانیم که تعییر اندازه ندهد و به جای اینکار آن را به حالت افقی نشان دهد. برای انجام این کار می توان از تگ meta به شکل زیر استفاده کرد:

<meta name="viewport" content="width=device-width, initial-scale=1.0 ">

به طور پیشفرض متد Action روی home controller فراخوانی شده است لذا در ادامه:

<<nav
<ul id="menu" data-role="listview"> <li>@Html.ActionLink("About Us", "AboutUs", "Home")</li> <li>@Html.ActionLink("Contact Us", "ContactUs", "Home")</li> <li>@Html.ActionLink("Student Directory", "StudentDirectory", "Home")</li> </ul>
/nav>>

ما یک طرح ساده تری که به صورت زیر از سه action link ساده تشکیل شده را در نظر می گیریم و می خواهیم در زمان اجرا به عنوان یک list view و با کدهای jquery mobile که مقداردهی خصیصه ی “data-role=listview” می باشد به صورت خودکار مرتب شود. در واقع این مقدار دهی تمام آن چیزی است که برای این مرتب سازی به آن نیازمندیم:

در واقع کدهای jquery mobile runtime این مرتب سازی را انجام می دهند و همانطور که قبلا هم ذکر شده این تنها روش مرتب سازی داده ها نیست بلکه با این دسته از کدها راحتر و خیلی بهتر می توان عملیات مرتب سازی را انجام داد و همچنین با انواع مختلف موبایل ها هم سازگاری دارند. حتی می توانید با قالب بندی و مرتب سازی، ظاهر سایت خود را آنگونه که مدنظرتان هست طراحی کنید.
مثلا هنگامی که دکمه های About us یا Contact را فراخوانی می کنید صفحه ی زیر نشان داده می شود که به راحتی می توانید تمامی توضیحات دلخواه را برای نمایش به آن اضافه کنید.

با کلیک کردن روی option هرکدام از گزینه ها می توان جزئیات مربوط به آن را به صورت زیر مشاهده کنید.

 کدهای View پوشه ی دانشجویان را که ببینید متوجه می شوید که خیلی ساده است چرا که دقیقا دیتاها را از همان لیستهای قبلی فراخوانی می کنند.

جزئیات این view به این شکل است:

@{
ViewBag.Title = "Student Directory"; Layout = "~/Views/Shared/_Layout.cshtml"; var random = new Random();
}
<ul data-role="listview"> @foreach (string student in ViewBag.Students) { <li>
@{var number = random.Next(1000, 9999); }
<img src="@Url.Content("~/Content/images/UserImages/80-80/" + student + ".jpg")" alt="@student"/> <h3>@student</h3> <h4>919-555-@number</h4> </li>
} </ul

قبل از اینکه بر روی کدهای مدل و کنترلر بخواهید View مرتبط با برنامه های اندروید را بزاریم، بهتر است کل پروژه asp.net mvc را روی یک کامپیوتر دسکتاپی اجرا کرده بعد این کار را انجام داد.
همچنین می توانید این کدها را به صورت مستقیم روی مبایل ای تعبیه شده در سایت، تست و خطایابی کنید و اگر PC و مبایل دریک شبکه باهم در ارتباط باشند می توانید با اعمال تغییرات روی مرورگر محیط asp.net یا iis express به برنامه های تحت وب روی موبایل دسترسی پیدا کنی، البته این دسترسی به صورت پیشفرض غیرفعال است.
روش های alternate توسط Proxy ها نیز برای هدایت ترافیک روی پورت های خارجی در سرورها وجود دارد. در واقع این معمولی ترین شیوه مورد استفاده می باشد.
این پروکسی در لینک زیر برای دانلود در دسترس است:
https://github.com/jocull/sharpproxy

در بخش های بعدی قسمت مطالب و خدمات افراگرافیک بخش آموزش طراحی سایت این مبحث را به صورت مفصل تری توضیح خواهیم داد.

 www.afragraphic.ir

 info@afragraphic.ir

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.